<nz-card
  ><nz-tabset [nzTabBarGutter]="16" [nzTabBarExtraContent]="schemaTpl" [(nzSelectedIndex)]="selectedIndex">
    <nz-tab nzTitle="表单界面" />
    <nz-tab nzTitle="Schema" />
    <nz-tab nzTitle="Schema-data" />
    <nz-tab nzTitle="Schema-ui" />
    <nz-tab nzTitle="使用说明" />
  </nz-tabset>
  <ng-template #schemaTpl>
    <button nz-button nzType="primary" (click)="schemaAction()">应用</button>
  </ng-template>

  <ng-container *ngIf="selectedIndex === 0">
    <nz-radio-group [(ngModel)]="layout" (ngModelChange)="layoutChange($event)" nzButtonStyle="solid">
      <label nz-radio-button nzValue="horizontal">horizontal</label>
      <label nz-radio-button nzValue="vertical">vertical</label>
      <label nz-radio-button nzValue="inline">inline</label>
    </nz-radio-group>

    <nz-card>
      <sf
        [schema]="schema"
        [formData]="formData"
        [ui]="ui"
        [layout]="layout"
        (formSubmit)="sfFormsubmit($event)"
        (formChange)="sfFormchange($event)"
        (formError)="sfFormError($event)"
      />
    </nz-card>
  </ng-container>

  <!-- <ng-container *ngIf="selectedIndex === 1">
    <nz-code-editor
      class="editor"
      [ngModel]="formMeta"
      [nzEditorOption]="{ language: 'json', theme: 'vs' }"
      (ngModelChange)="formMetaChange($event)"
    ></nz-code-editor>
  </ng-container>
  <ng-container *ngIf="selectedIndex === 2">
    <nz-code-editor
      class="editor"
      [ngModel]="formValue"
      [nzEditorOption]="{ language: 'json', theme: 'vs' }"
      (ngModelChange)="formValueChange($event)"
    ></nz-code-editor>
  </ng-container>
  <ng-container *ngIf="selectedIndex === 3">
    <nz-code-editor
      class="editor"
      [ngModel]="formUI"
      [nzEditorOption]="{ language: 'json', theme: 'vs' }"
      (ngModelChange)="formUIChange($event)"
    ></nz-code-editor>
  </ng-container>
  <ng-container *ngIf="selectedIndex === 4">
    <nz-tabset [(nzSelectedIndex)]="selectedSubIndex">
      <nz-tab nzTitle="Schema代码-index.ts"></nz-tab>
      <nz-tab nzTitle="SchemaUi代码-ui.ts"> </nz-tab>
      <nz-tab nzTitle="备注说明"> </nz-tab>
    </nz-tabset>
    <ng-container *ngIf="selectedSubIndex === 0">
      <nz-code-editor
        class="editor"
        [ngModel]="indexTs"
        [nzEditorOption]="{ language: 'typescript', theme: 'vs-dark' }"
        (ngModelChange)="formValueChange($event)"
      ></nz-code-editor>
    </ng-container>
    <ng-container *ngIf="selectedSubIndex === 1">
      <nz-code-editor
        class="editor"
        [ngModel]="uiTs"
        [nzEditorOption]="{ language: 'typescript', theme: 'vs-dark' }"
        (ngModelChange)="formValueChange($event)"
      ></nz-code-editor>
    </ng-container> -->
  <ng-container *ngIf="selectedSubIndex === 2">
    <p nz-paragraph style="margin-bottom: 8px">SFSchemaType = 'number' | 'integer' | 'string' | 'boolean' | 'object' | 'array';</p>
    <p nz-paragraph style="margin-bottom: 8px">
      export type SFBuiltInWidgets = | 'text' | 'string' | 'number' | 'integer' | 'date' | 'time' | 'radio' | 'checkbox' | 'boolean' |
      'textarea' | 'select' | 'tree-select' | 'tag' | 'upload' | 'transfer' | 'slider' | 'rate' | 'autocomplete' | 'cascader' | 'mention' |
      'custom' | 'array' | 'object';
    </p>
    <p nz-paragraph style="margin-bottom: 8px">
      export type SFBuiltInWidgets = | 'text' | 'string' | 'number' | 'integer' | 'date' | 'time' | 'radio' | 'checkbox' | 'boolean' |
      'textarea' | 'select' | 'tree-select' | 'tag' | 'upload' | 'transfer' | 'slider' | 'rate' | 'autocomplete' | 'cascader' | 'mention' |
      'custom' | 'array' | 'object';
    </p>
  </ng-container>
  <!-- </ng-container> -->
</nz-card>
